<template>
  <aside class="blogger-wrapper card-box">
    <div class="avatar"  >
       <img :src="blogger.avatar" alt="头像" title="我好看吗" /> 
       <div class="imgmask" id="imgmask">
          <div v-for="item in num" >
            <div v-for="item in num" style="border: 1px solid #000;border-collapse: collapse;background-color: aqua;width: 40px;height: 50px;float: left;"> </div>
          </div>
       </div>
    </div>
    <div class="icons" v-if="social && social.icons && social.icons.length">
      <a
        v-for="(item, index) in social.icons"
        :key="index"
        :href="item.link"
        :title="item.title"
        :class="['iconfont', item.iconClass]"
        :style="{ width: 100 / social.icons.length + '%' }"
        target="_blank"
      />
    </div>
    <div class="blogger">
      <span class="name">{{ blogger.name }}</span>
      <span class="slogan">{{ blogger.slogan }}</span>
    </div>
  </aside>
</template>

<script>
export default {
  computed: {
    blogger () {
      // console.log(document.querySelectorAll(".avatar"));
      // document.querySelector(".avatar").style.backgroundColor = this.$themeConfig.blogger

      return this.$themeConfig.blogger
    },
    num(){
      return 6
    },
    social () {
      return this.$themeConfig.social
    }
  },
  //  async mounted(){
  //   let nodelist=document.getElementById("imgmask")

  //   function sleep(ms) {
  //      return new Promise(resolve => setTimeout(resolve, ms));
  //  }
  // //  console.log(nodelist);
  //  let i=0;
  //  for (const key in nodelist.children) {
  //     const tr = nodelist.children[key];
  //     i
  //     console.log("tr-================",i++);
  //      for (const j in tr.children) {
  //         const td =  tr.children[j];
  //         console.log(td);
  //         if(typeof td === 'object' && td !== null){
  //           await sleep(500).then(()=>{

  //               try {
  //                 console.log("2222-=",typeof td)
  //                 tr.removeChild(td);
                  
  //               } catch (error) {
  //                 console.log("type-=",typeof td)
  //               }

  //               })
  //         }

  //      }
  //  }
  // }
  
 
}
</script>

<style lang='stylus'>
.blogger-wrapper
  height auto
  display inline-table
  padding-top 0 !important
  overflow hidden
  .avatar
    width 100%
    position relative
    border 1px
    // height 235px
    overflow hidden
    @media (max-width 900px)
      // width 205px
      // height 205px
    img
      width 100%
      height 100%
    .imgmask
      width 300px
      height 300px
      left 0
      top 0
      position absolute
         
  .icons
    // border 1px solid var(--borderColor)
    border-top none
    height 35px
    line-height 35px
    a
      font-size 20px
      width 33%
      color var(--textColor)
      display block
      float left
      text-align center
      opacity 0.8
      &:hover
        color $accentColor
  .blogger
    padding 0.3rem 0.95rem 0 0.95rem
    .name
      font-size 1.3rem
      display block
      margin-bottom 6px
    .slogan
      color var(--textColor)
</style>
